<template>
  <list-layout channel="qa" :hideCrumbs="true">
    <div class="list-top-text q-mt-lg">
      {{$t(('常见问题'))}}
    </div>
    <div class="qa-list cursor-pointer"
      :class="{ hovered: hovered === idx }"
      @mouseenter="hovered = idx"
      @mouseleave="hovered = undefined"
      clickable @click="qClicked(idx)"
      v-for="(q, idx) in data.问题" :key="idx">
      <div class="question row no-wrap">
        <q-img class="question-mark"
          src="images/qa-q.png"
          width="26px" height="24px"></q-img>
        <div class="content">
          {{q.问题.q}}
        </div>
      </div>
      <div v-if="showA[idx]" class="answer row no-wrap">
        <q-img class="answer-mark"
          src="images/qa-a.png"
          width="26px" height="24px"></q-img>
        <div class="content">
          {{q.问题.a}}
        </div>
      </div>
    </div>
  </list-layout>
</template>

<script>
import mixins from 'eis-admin-mixins';
import { RefreshOnLocaleChange } from '../../components/mixins/locale';
import listLayout from '../../components/listLayout.vue';

export default {
  name: 'QnAPage',
  mixins: [mixins.ObjectDataMixin, RefreshOnLocaleChange],
  components: {
    listLayout,
  },
  data() {
    return {
      showA: {
        0: true,
      },
      hovered: undefined,
    };
  },
  methods: {
    qClicked(idx) {
      this.$set(this.showA, idx, !this.showA[idx]);
    },
  },
};
</script>

<style lang="scss" scoped>
.qa-list {
  min-height: 60px;
  .question {
    font-size: 16px;
    color: #333333;
    padding: 17px 0;
    white-space: normal;
    word-break: break-all;
    &-mark {
      min-width: 26px;
      margin-right: 11px;
    }
  }
  .answer {
    font-size: 14px;
    color: #666666;
    padding-bottom: 25px;
    line-height: 44px;
    white-space: normal;
    word-break: break-all;
    &-mark {
      min-width: 26px;
      margin-right: 11px;
      margin-top: 10px;
    }
  }

  &.hovered {
    background-color: rgba(0,0,0,0.02);
    .question,.answer {
      color: $primary;
    }
  }

  border-bottom: 1px dashed grey;

}
</style>
